<style scoped>
@import "@/assets/table.css";
</style>
<template>
  <el-table
      :data="tableData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.commodityId"
        prop="id"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        {{scope.$index+1+pageSize*(currentPage-1)}}
      </template>
    </el-table-column>

    <el-table-column
        :label="tableDataText.commodityName"
        prop="name"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.cid"
        prop="categoryName"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="number"
        :label="tableDataText.commodityNum"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="per"
        :label="tableDataText.per"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="remark"
        :label="tableDataText.remark"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.handle"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        <el-button
            size="small"
            @click="handleEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
        v-model:current-page="currentPage"
    />
  </div>
  <el-dialog
      v-model="dialogFormVisibleUpdate"
      width="500"
      title="商品编辑"
  >
    <el-form
        :model="dialogFormData"
        label-width="auto"
    >
      <el-form-item
          :label="`${tableDataText.commodityId}：`"
      >
        <el-input
            v-model="dialogFormData.id"
            disabled="disabled"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.commodityName}：`"
      >
        <el-input
            v-model="dialogFormData.name"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.cid}：`"
      >
        <el-select
            v-model="dialogFormData.cid"
            placeholder="请选择分类"
            filterable
        >
          <el-option
              v-for="item in getCategoryData"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.per}：`"
      >
        <el-input
            v-model="dialogFormData.per"
        />
      </el-form-item>

      <el-form-item
          :label="`${tableDataText.commodityNum}：`"
      >
        <el-input
            v-model="dialogFormData.number"
            disabled="disabled"
        />
      </el-form-item>
      <el-form-item
          :label="`${tableDataText.remark}：`"
      >
        <el-input
            v-model="dialogFormData.remark"
            type="textarea"
            placeholder="请输入备注信息"
            show-word-limit
            maxlength="250"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleUpdate = false"
        >
          取消
        </el-button>
        <el-button type="primary" @click="updateGoods">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogFormVisibleDelete"
      title="商品删除"
      width="500"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleDelete = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="deleteGoods"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElTable} from 'element-plus'
import {
  getGoodsAPI,
  updateGoodsAPI,
  deleteGoodsAPI,
  getCategoryAPI
} from "@/axios/api";

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)
const tableDataText = {
  commodityId: "商品编号",
  commodityName: "商品名称",
  cid: "分类名称",
  per: "商品单位",
  commodityNum: "商品数量",
  remark: "商品备注",
  handle: "操作"
}
const tableData = ref([])

const multipleSelection = ref([])
const dialogFormVisibleUpdate = ref(false)
const dialogFormVisibleDelete = ref(false)

const dialogFormData = ref({})
const handleDeleteIndex = ref(0)
const getCategoryData = ref([])

function getGoods() {
  getGoodsAPI({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then(data => {
    console.log(data)
    tableData.value = data.data.data.stockList
    total.value = data.data.data.total
  })
}

function getCategory() {
  getCategoryAPI({
    pageNum: null,
    pageSize: null,
    sort: 0
  }).then(data => {
    getCategoryData.value = data.data.data
    console.log("getCategoryData", getCategoryData.value)
  })
}

onMounted(() => {
  getGoods()
})

function currentChange() {//分页
  console.log(currentPage.value)
  getGoods()
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}

const handleEdit = (row) => {//商品编辑
  dialogFormData.value = JSON.parse(JSON.stringify(row))
  console.log(dialogFormData.value)
  dialogFormVisibleUpdate.value = true
  getCategory()
}

function updateGoods() {//商品修改
  dialogFormVisibleUpdate.value = false
  console.log(dialogFormData.value)
  updateGoodsAPI(dialogFormData.value).then(data => {
    console.log(data)
    getGoods()
    ElMessage.success(data.data.data)
  })
}

const handleDelete = (row) => {//商品删除
  handleDeleteIndex.value = row.id
  dialogFormVisibleDelete.value = true
}

function deleteGoods() {
  if (multipleSelection.value.length == 0) {
    deleteGoodsAPI({
      ids: handleDeleteIndex.value
    }).then(data => {
      console.log(data)
      getGoods()
      ElMessage.success(data.data.data)
    })
  } else {
    for (let i = 0; i < multipleSelection.value.length; i++) {
      deleteGoodsAPI({
        ids: multipleSelection.value[i].id
      }).then(data => {
        console.log(data)
        getGoods()
        if (i == multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  dialogFormVisibleDelete.value = false
}

</script>
